<template>
  <div>
    <div  class="Head">
      <div v-if="login_status">
        <div class="Head-title">登录</div>
        <div  class="Head-info">Please Login</div>
      </div>
      <div v-else>
        <div class="Head-title">注册</div>
        <div  class="Head-info">Please Register</div>
      </div> 
    </div>
    <div class="body">
      <div class="login-form">
        <van-field placeholder="请输入用户名" :value="inputUserName" @change="OnUserName"/>
        <van-field type="password" placeholder="请输入密码" :value="inputPassword" @change="OnPassword"/>
      <div v-if="!login_status">
        <van-field placeholder="请绑定的手机号" :value="inputPhoneNumber" @change="OnPhoneNumber"/>
      </div>
    </div>
    <van-button slot="button" 
      round
      block 
      color="#3d7ef9"
      @click="Onclick"
      >{{login_status?'登陆':'注册'}}
      </van-button>
    
    <div class="other">
      <div>
        <div v-if="login_status">
          <span @click="register">注册账户</span>
        </div>
        <div v-else>
          <span @click="register">登陆</span>
          </div>
      </div>
      <span style="margin: 0 30px">|</span>
      <div>
        <span @click="FindPassword">忘记密码</span>
      </div>
    </div>
    <div class="logo">
      <span class="logo_span">Designed by WanderingSun</span>
      </div>
      <van-dialog
        use-slot
        title="找回密码校验"
        :show="FoundPassword"
        show-cancel-button
        transition="fade"
        @confirm="FindPassword_conf"
        @cancle="FindPassword_quit"
      >
        <van-field placeholder="请输入注册时绑定的手机号" :value="inputPhoneNumber" @change="OnPhoneNumber"/>
      </van-dialog>

      <van-dialog
        use-slot
        title="重置密码"
        :show="ResetPassword"
        show-cancel-button
        transition="fade"
        @confirm="ResetPassword_conf"
        @cancle="ResetPassword_quit"
      >
      <van-field lable="用户名" title-width="60px" :value="inputUserName" readonly/>
      <van-field lable="新密码" title-width="60px" type="password" placeholder="请输入新密码" :value="inputPhoneNumber" @change="OnPhoneNumber"/>
      </van-dialog>
      <van-toast id="van-toast" />
    </div>
  </div>
</template>

<script>
import Toast from 'vant-weapp/dist/toast/toast'
export default {
  data () {
    return {
     login_status:true,
     inputUserName:"",
     inputPassword:"",
     inputPhoneNumber:"",
     FoundPassword:false,
     ResetPassword:false
    }
  },
  methods:{
    OnUserName(event){
      var that =this
      that.$set(that,"inputUserName",event.mp.detail)//将输入框的值复制到inputUserName
      //console.log("当前输入用户名:",event.mp.detail)
    },
    OnPassword(event){
      var that =this
      that.$set(that,"inputPassword",event.mp.detail)//将输入框的值复制到inputPassword
      //console.log("当前输入密码:",event.mp.detail)
    },
    OnPhoneNumber(event){
      var that =this
      that.$set(that,"inputPhoneNumber",event.mp.detail)//将输入框的值复制到inputPhoneNumber
      //console.log("当前输入手机号:",event.mp.detail)
    },
    Onclick(event){
      var that=this
      Toast.loading({
        duration:0,//持续展示
        forbidClick:true,//禁止背景被点击
        message:that.login_status? '登录中...':'注册中...'
      })
      //模拟延时1s
      setTimeout(()=>{
        if(!that.login_status)
        {
          wx.setStorage
        ({
            key:"user",
            data:{
            username:that.inputUserName,
            password:that.inputPassword,
            phonenumber:that.inputPhoneNumber
            },
            success (res) {
            console.log('注册成功')
            Toast.success('注册成功')
              },
            fail (res) {
            console.log('注册失败')
            Toast.fail('注册失败')
              }
          });
        }
        else
        {
          wx.getStorage({
           key: 'user',
           success (res) {
              if(that.inputUserName==res.data.username&&that.inputPassword==res.data.password)
              {
                console.log('登陆成功')
                Toast.success('登陆成功')
                //500ms后跳转到首页
                setTimeout(()=>{
                  wx.switchTab({
                  url: '/pages/index/main'
                      })
                },500)
              }
              else
              {
               console.log('登陆失败')
               Toast.fail('登陆失败,请检查你的用户名与密码')
              }
             },
           fail(res)
           {
            Toast.fail('没有该用户信息')
           }
          })
        }
      },1000)
    },
    register(event){
       var that=this
       that.login_status=!that.login_status
    },
    FindPassword(event){
     var that=this
     that.FoundPassword=true
    },
    FindPassword_conf(event)
    {
      var that=this
      that.FoundPassword=false
      wx.getStorage({
        key: 'user',
        success (res) {
        if(that.inputPhoneNumber==res.data.phonenumber)
        {
          that.inputUserName=res.data.username
          that.ResetPassword=true
          console.log('找到用户:',res.data.username)
        }
        else
        {
          console.log('没有找到该用户')
          Toast.fail('没有找到该用户')
          that.inputPhoneNumber=""
        }
      },
        fail(res)
        {
         Toast.fail('该用户未被注册')
         that.inputPhoneNumber=""
        }
      })
    },
    FindPassword_quit(event)
    {
      var that=this
      that.inputPhoneNumber=""
      that.FoundPassword=false
    },
    ResetPassword_conf(event)
    {
      var that=this
      that.ResetPassword=false
      wx.setStorage
      ({
        key:"user",
        data:{
          password:that.inputPassword
        },
        success (res) {
         console.log('密码重置成功')
         Toast.success('密码重置成功')
        },
        fail (res) {
         console.log('未知错误')
         Toast.fail('未知错误')
        }
      })
    },
    ResetPassword_quit(event){
      var that=this
      that.inputUserName="",
      that.inputPassword="",
      that.inputPhoneNumber="",
      that.ResetPassword=false
    }
  } 
}
</script>

<style lang="scss" scoped>
.Head{
  height: 100px;
  padding: 25px 0;
  background-color: #3d7ef9;
  .Head-title{
    font-size:28px;
    font-weight: 500;
    color:#fff;
    margin-left: 20px;
  }
  .Head-info{
    font-size: 14px;
    color: #fff;
    margin-left: 20px;
  }
}
.body{
  padding: 20px;
  margin-top: -20px;
  border-radius:15px 15px 0 0;
  background-color: #fff;
  .login-form{
    margin-bottom: 30px;
  }
  .other{
    display:flex;
    justify-content: center;
    margin-top: 20px;
    color:#9f9f9f
  }
  .logo{
    display:flex;
    justify-content: center;
    .logo_span{
      color:#d6d6d6;
      position:fixed;
      bottom: 50px;
    }
  }
}
</style>
